<template>
  <div
    @click="handleClick"
    :class="controls ? '' : 'hide-controls'"
    class="full"
  >
    <div class="dplayer-container" ref="player"></div>
    <div
      v-if="poster && posterIsShow"
      @click.stop="play"
      class="cover-wraper"
      style="z-index: 2"
    >
      <my-image
        v-if="poster"
        style="pointer-envent: none"
        height="100%"
        width="100%"
        class="poster"
        :src="poster"
        alt="poster"
      />
    </div>
    <img
      @click.stop="play"
      v-if="!isPlay && (src || quality.length)"
      class="play-btn fadeIn animated"
      src="./play_icon.png"
    />
  </div>
</template>

<script>
import { mapState } from "vuex";
import DPlayer from "dplayer";
import * as Hls from "hls.js";

import MyImage from "@/common/my-image/index.vue";

import { useVideoCache } from "@/utils/preload-tools";

window.Hls = Hls;

export default {
  name: "dplayer",
  components: {
    MyImage,
  },
  props: {
    urls: {
      type: Array,
      default: () => [],
    },
    poster: {
      type: String, // pointer主动显示播放按钮，所以添加一个图片封面
      default: "",
    },
    src: {
      type: String,
      default: "",
    },
    controls: {
      type: Boolean,
      default: true,
    },
    autoplay: {
      type: Boolean,
      default: false,
    },
    video_id: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      posterIsShow: true,
      isPlay: false,
    };
  },
  computed: {
    ...mapState({
      mode: (state) => state.config.mode,
    }),
    quality() {
      const names = {
        FD: "流畅",
        LD: "标清",
        SD: "高清",
      };
      const urls = [...this.urls].reverse();
      return urls.map((item) => ({
        url: item.play_url,
        name: names[item.definition] || item.definition,
      }));
    },
  },
  watch: {
    urls() {
      this.$nextTick(this.init);
    },
  },
  mounted() {
    this.init();
  },
  beforeUnmount() {
    if (this.dp) {
      this.dp.destroy();
    }
  },
  methods: {
    emitPlay() {
      this.dp.play();
    },
    emitPause() {
      console.log("暂停");
      this.dp.pause();
    },
    emitClick() {
      this.$emit("click");
    },
    handleClick() {
      this.emitClick();
      if (this.controls) return;
      if (this.dp.paused) {
        this.dp.play();
      } else {
        this.dp.pause();
      }
    },
    async init() {
      if (!this.src && !this.quality.length) return;
      const urlObj = this.src
        ? {
            url: await useVideoCache(this.src),
          }
        : { quality: this.quality };
      this.dp = new DPlayer({
        container: this.$refs.player,
        autoplay: this.autoplay,
        preload: "metadata",
        video: {
          ...urlObj,
          muted: true,
          defaultQuality: 0,
          pic: this.poster,
          thumbnails: this.poster,
        },
        // screenshot: true, // 截图
      });
      this.dp.on("ended", () => {
        this.$emit("ended");
        this.posterIsShow = true;
        this.isPlay = false;
      });
      this.dp.on("play", () => {
        this.$emit("play");
        this.isPlay = true;
        this.posterIsShow = false;
      });
      this.dp.on("pause", () => {
        this.$emit("pause");
        this.posterIsShow = false;
        this.isPlay = false;
      });
    },
    play() {
      if (this.dp) {
        this.dp.play();
      }
      this.emitClick();
    },
    pause() {
      if (this.dp) {
        this.dp.pause();
      }
      this.emitClick();
    },
  },
};
</script>

<style lang='less' scoped>
.el-popup-parent--hidden {
  .cover-wraper {
    height: 100%;
    z-index: 1 !important;
  }
  .play-btn {
    z-index: 1 !important;
  }
}
.full {
  width: 100%;
  height: 100%;
  position: relative;
}
.dplayer-container {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}
.play-btn {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 70px;
  height: 70px;
  z-index: 10000;
}
.cover-wraper {
  z-index: 10000 !important;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  .poster {
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    background-color: #eee;
  }
}
</style>

<style lang="less">
.dplayer-bar-preview {
  display: none !important;
}
.dplayer-controller {
  .dplayer-setting-icon {
    visibility: hidden !important;
  }
  .dplayer-full {
    &::after {
      display: none !important;
    }
  }
}
.dplayer-container .dplayer-setting {
  display: none !important;
}
</style>
